<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" title="详情" :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="detaill_title first">订单详情</div>
    <el-descriptions :column="2" border :labelStyle="{ width: '120px' }">
      <el-descriptions-item label="订单编号">{{orderInfo ? orderInfo.number : ''}}</el-descriptions-item>
      <el-descriptions-item label="实际支付金额">{{orderInfo ? orderInfo.price : ''}}</el-descriptions-item>
      <el-descriptions-item label="订单状态">
        <dict-tag :options="dict.type.jieke_order_status" :value="orderInfo.status" />
      </el-descriptions-item>
      <el-descriptions-item label="订单类型">
        <dict-tag :options="dict.type.jieke_order_type" :value="orderInfo.type" />
      </el-descriptions-item>
      <el-descriptions-item label="柜组编号">
        {{orderInfo.vcabinetDrawer? orderInfo.vcabinetDrawer.cabinetGroupNo :''}}
      </el-descriptions-item>
      <el-descriptions-item label="柜子名称">
        {{orderInfo.vcabinetDrawer ? orderInfo.vcabinetDrawer.name : ''}}
      </el-descriptions-item>
      <el-descriptions-item label="加急服务">
        <dict-tag :options="dict.type.jieke_order_urgent" :value="orderInfo.urgent" />
      </el-descriptions-item>
      <el-descriptions-item label="支付方式">
        <dict-tag :options="dict.type.jieke_payment_method" :value="orderInfo.paymentMethod" />
      </el-descriptions-item>
      <el-descriptions-item label="是否返洗">
        {{orderInfo.toBackId ? '是' : '否'}}
      </el-descriptions-item>
      <el-descriptions-item label="备注">{{orderInfo ? orderInfo.content : ''}}</el-descriptions-item>
      <el-descriptions-item label="支付时间">{{orderInfo ? orderInfo.paytimeStr : ''}}</el-descriptions-item>
      <el-descriptions-item label="余额支付">{{orderInfo ? orderInfo.balance : ''}}</el-descriptions-item>
      <el-descriptions-item label="用户存入柜口号">{{orderInfo ? orderInfo.num : ''}}</el-descriptions-item>
      <el-descriptions-item label="骑手存入柜口号">{{orderInfo ? orderInfo.numDe : ''}}</el-descriptions-item>
      <!-- <el-descriptions-item label="报价金额(元)"></el-descriptions-item> -->
      <!-- <el-descriptions-item label="支付保价金额"></el-descriptions-item> -->
      <!-- <el-descriptions-item label="使用的优惠券"></el-descriptions-item> -->
    </el-descriptions>
    <div class="detaill_title">买家信息</div>
    <el-descriptions :column="2" border :labelStyle="{ width: '120px' }">
      <el-descriptions-item label="姓名">{{userInfo ? userInfo.userName : ''}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{userInfo ? userInfo.userMobile : ''}}</el-descriptions-item>
    </el-descriptions>
    <!-- 如果用户申请了售后，展示用户提交的售后凭证 -->
    <div v-if="orderInfo.status == 51">
      <div class="detaill_title">审核商品</div>
      <el-table :border="true" :data="salesList" @selection-change="dataListSelectionChangeHandle">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="商品ID" width="120" align="center" prop="id"></el-table-column>
        <el-table-column label="商品名称" align="center" prop="title"></el-table-column>
        <el-table-column label="商品图片" align="center">
          <template slot-scope="scope">
            <ImagePreview width="100px" height="100px" noneType="暂无图片" :src="scope.row.image" fit="cover"></ImagePreview>
          </template>
        </el-table-column>
        <el-table-column label="价格" align="center" prop="price"></el-table-column>
        <el-table-column label="操作" align="center" prop="price">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-info" @click="detailHandle(scope.row.orderSales)">查看描述</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="detaill_title">订单商品</div>
    <el-table :border="true" :data="orderGoods">
      <el-table-column label="商品ID" width="120" align="center" prop="id"></el-table-column>
      <el-table-column label="商品名称" align="center" prop="title"></el-table-column>
      <el-table-column label="商品图片" align="center">
        <template slot-scope="scope">
          <ImagePreview width="100px" height="100px" noneType="暂无图片" :src="scope.row.image" fit="cover"></ImagePreview>
        </template>
      </el-table-column>
      <el-table-column label="价格" align="center" prop="price"></el-table-column>
      <el-table-column label="商品审核状态" align="center">
        <template slot-scope="scope">
          <div class="content_text">
            <dict-tag class="tag" :options="dict.type.jieke_ordersales_status" :value="scope.row.orderSales ? scope.row.orderSales.status : '无'" />
            <div class="content">{{scope.row.orderSales && scope.row.orderSales.status == 90 ? '('+scope.row.orderSales.shenContent+')':''}}</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="removeOrderGoods.length">
      <div class="detaill_title">补差价删除的商品</div>
      <el-table :border="true" :data="removeOrderGoods">
        <el-table-column label="商品ID" width="120" align="center" prop="id"></el-table-column>
        <el-table-column label="商品名称" align="center" prop="title"></el-table-column>
        <el-table-column label="商品图片" align="center">
          <template slot-scope="scope">
            <ImagePreview width="100px" height="100px" noneType="暂无图片" :src="scope.row.image" fit="cover"></ImagePreview>
          </template>
        </el-table-column>
        <el-table-column label="价格" align="center" prop="price"></el-table-column>
        <el-table-column label="商品审核状态" align="center">
          <template slot-scope="scope">
            <div class="content_text">
              <dict-tag class="tag" :options="dict.type.jieke_ordersales_status" :value="scope.row.orderSales ? scope.row.orderSales.status : '无'" />
              <div class="content">{{scope.row.orderSales && scope.row.orderSales.status == 90 ? '('+scope.row.orderSales.shenContent+')':''}}</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="detaill_title">收货信息</div>
    <el-descriptions :column="2" border :labelStyle="{ width: '120px' }">
      <el-descriptions-item label="收货人">{{orderAddress ? orderAddress.recipientName : ''}}</el-descriptions-item>
      <el-descriptions-item label="收货电话">{{orderAddress ? orderAddress.contactNumber : ''}}</el-descriptions-item>
      <el-descriptions-item label="收货地址" :span="2">{{orderAddress ? orderAddress.streetAddress : ''}}</el-descriptions-item>
    </el-descriptions>
    <div class="detaill_title">配送员信息</div>
    <el-descriptions :column="2" border :labelStyle="{ width: '120px' }">
      <el-descriptions-item label="姓名">{{deliverMemberVo ? deliverMemberVo.name : ''}}</el-descriptions-item>
      <el-descriptions-item label="电话" :span="2">{{deliverMemberVo ? deliverMemberVo.mobile : ''}}</el-descriptions-item>
    </el-descriptions>
    <!-- 查看返洗的商品用户提交描述 -->
    <el-dialog title="用户描述" class="common_dialog" :visible.sync="saleShow" append-to-body>
      <el-descriptions :column="2" border :labelStyle="{ width: '120px' }">
        <el-descriptions-item label="照片凭证" :span="2">
          <div class="imgList">
            <ImagePreview width="100px" height="100px" noneType="暂无图片" v-for="item,index in salesItem.imageList" :key="index" :src="item" fit="cover"></ImagePreview>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="问题描述" :span="2">
          {{salesItem.content}}
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saleShow = false">取 消</el-button>
      </div>
    </el-dialog>
    <template slot="footer">
      <div v-if="orderInfo.status == 51">
        <el-button :loading="confirmLoading" type="primary" @click="formSubmitHandle()">通 过</el-button>
        <el-button :loading="returnLoading" type="danger" @click="returnHandle">驳 回</el-button>
        <el-button :loading="finishLoading" type="success" @click="finish">售后完成</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
      <div v-else>
        <!-- <el-button type="success" @click="differenceHandle">补差价</el-button> -->
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </template>
    <ReturnReason v-if="returnReasonVisible" ref="returnReasonDialog" @refreshSelectionList="getSelectionList"></ReturnReason>
    <Difference v-if="differenceVisible" ref="differenceDialog" @refresh="init()"></Difference>
  </el-dialog>
</template>

<script>
import { getOrder, orderReback, orderSave, updateStatusByOrderGoodsIds } from "@/api/order/order";
import ReturnReason from './returnReason.vue'  //选择商品弹窗
import Difference from './difference.vue'  //补差价弹窗
export default {
  dicts: ['jieke_order_status', 'jieke_payment_method', 'jieke_order_type', 'jieke_order_urgent', 'jieke_ordersales_status'],
  data() {
    return {
      visible: false,
      id: '', //订单id
      orderGoods: [], //订单商品
      orderInfo: {}, //订单信息
      userInfo: {}, //买家信息
      orderAddress: {}, //订单收货地址
      deliverMemberVo: {}, //配送员信息
      salesList: [], //用户提交的售后商品列表
      selectionList: [], //选中的售后商品数组
      confirmLoading: false, //通过按钮loading
      returnLoading: false, // 全部驳回按钮loading
      finishLoading:false, //售后完成loading
      saleShow: false, //用户凭证弹窗是否显示
      salesItem: {}, //用户凭证
      row: {}, //上一个页面传入的订单信息
      returnReasonVisible: false, //驳回原因弹窗
      differenceVisible: false, //补差价弹窗
      removeOrderGoods: [], //补差价删除的商品
    }
  },
  components: {
    ReturnReason, //驳回原因弹窗
    Difference, //补差价弹窗
  },
  computed: {

  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.id ? this.getInfo() : ''
      })
    },
    // 点击补差价按钮
    differenceHandle() {
      this.differenceVisible = true
      this.$nextTick(() => {
        this.$refs.differenceDialog.id = this.id
        this.$refs.differenceDialog.init()
      })
    },
    // 查看售后商品的用户提交详情
    detailHandle(orderSales) {
      this.saleItem = {}
      this.saleShow = true
      this.salesItem = {
        imageList: orderSales ? orderSales.images.split(',') : '',
        content: orderSales ? orderSales.content : ''
      }
    },
    // 获取信息
    getInfo() {
      const id = this.id
      getOrder(id).then(response => {
        this.orderInfo = response.data;
        this.userInfo = {
          userName: response.data.userName,
          userMobile: response.data.userMobile,
        }
        this.orderGoods = response.data.orderGoods
        this.orderAddress = response.data.orderAddress
        this.deliverMemberVo = response.data.deliverMemberVo
        this.removeOrderGoods = response.data.removeOrderGoods
        let list = []
        response.data.orderGoods && response.data.orderGoods.map((item) => {
          if (item.orderSales && (item.orderSales.status == 10 || item.orderSales.status == 20)) {
            list.push(item)
          }
        })
        this.salesList = list
      });
    },
    // 选中的table售后
    dataListSelectionChangeHandle(val) {
      this.selectionList = val
    },
    // 筛选未选中的数组
    arrUpdata(list1, list2) {
      // arr1 arr2 arr3 创建两个数组（arr1 arr2），用来短暂存放数据，查出两个数组（salesList ， selectionList）中不同的对象，生成新的数组arr3
      let arr1 = []
      let arr2 = []
      arr1.push(list1.filter(item => {
        return !list2.includes(item)
      }))
      arr2.push(list2.filter(item => {
        return !list1.includes(item)
      }))
      return arr1.flat().concat(arr2.flat())
    },
    // 完成售后订单
    finish() {
      if (this.salesList.length) {
        this.$modal.msgError("当前订单还存在未审核的商品");
        return
      }
      let data = {
        id: this.id,
        status: 52
      }
      this.finishLoading =true
      orderSave(data).then((res) => {
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.finishLoading =false
        this.$modal.msgSuccess("操作成功");
        this.visible = false
        this.$emit('refreshDataList')
      }).catch(()=>{
        this.finishLoading =false
      })
    },
    // 表单提交通过
    formSubmitHandle() {
      if (!this.selectionList.length) {
        this.$modal.msgError("请选择商品");
        return
      }
      let nameNum = this.selectionList.reduce((pre, cur) => {
        if (cur.goodsId in pre) {
          pre[cur.goodsId]++
        } else {
          pre[cur.goodsId] = 1
        }
        return pre
      }, {})
      this.row.goodsList = []
      this.row.goodsList = Object.keys(nameNum).map(key => ({
        goodsId: parseInt(key),
        goodsNum: nameNum[key]
      }));
      this.row.orderGoodsIds = []
      this.selectionList.map((item) => {
        this.row.orderGoodsIds.push(item.id)
      })
      const data = this.row
      this.$confirm('是否为选中商品进行审核通过？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 订单返洗请求
        orderReback(data).then((res) => {
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          this.$modal.msgSuccess("操作成功");
          this.confirmLoading = false
          this.init()
        }).catch(() => {
          this.confirmLoading = false
        })
      }).catch(() => {
        this.confirmLoading = false
      })
    },
    // 表单提交驳回
    returnHandle() {
      if (!this.selectionList.length) {
        this.$modal.msgError("请选择商品");
        return
      }
      let orderGoodsList = []
      this.selectionList.map((item) => {
        orderGoodsList.push(item.id)
      })
      this.returnReasonVisible = true
      this.$nextTick(() => {
        this.$refs.returnReasonDialog.selectionList = this.selectionList
        this.$refs.returnReasonDialog.init()
      })
    },
    // 驳回弹窗提交后的操作
    getSelectionList(selectionList) {
      this.returnLoading = true
      this.$confirm('是否为选中商品进行审核驳回？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let saleUpdata = []
        selectionList.map((item) => {
          saleUpdata.push({
            id: item.orderSales.id,
            orderGoodId: item.orderSales.orderGoodId,
            shenContent: item.orderSales.shenContent,
            status: 90,
          })
        })
        // 部分订单驳回请求
        updateStatusByOrderGoodsIds(saleUpdata).then((res) => {
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          this.$modal.msgSuccess("操作成功");
          this.returnLoading = false
          this.init()
        }).catch(() => {
          this.returnLoading = false
        })
      }).catch(() => { this.returnLoading = false })
    }
  }
}
</script>
<style lang="scss" scoped>
.content_text {
  display: flex;
  justify-content: center;
  align-items: center;
  .tag {
    min-width: 44px;
  }
  .content {
  }
}
.detaill_title {
  font-size: 16px;
  margin-bottom: 10px;
  margin-top: 30px;
  &.first {
    margin-top: 0;
  }
  &::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #1890ff;
    border-radius: 2px;
    margin-right: 10px;
    position: relative;
    top: 3px;
  }
}
.imgList {
  ::v-deep .el-image {
    margin-right: 10px;
  }
}
</style>
